<template>
  <div>
    <nav class="shenpi">
      <span style="font-size:24px">审批</span>
      <!-- <router-link to="/month">Go to Home</router-link> -->
    </nav>
    <el-card style="height:152px; margin:15px 24px;border-radius: 30px;">
      <el-row>
        <el-col :span="8">
          <div>
            <div class="ft20" align="left">{{task.upTime}}
              <el-button class="tongguo" plain @click="exportExcel()">pdf下载</el-button>
              <el-button class="tongguo" plain @click="exportPdf()">excle下载</el-button>
            </div>
            <h1 class="ft28">{{task.taskName}}</h1>

          </div>

        </el-col>
        <el-col :span="4">
          <!-- <img v-if="task.status == 0" alt="401" style="width:125px;height:105px" class="pic-error-child left"
            src="@/assets/wisdom/qz.png"> -->
          <img v-if="task.status == 0" alt="401" style="width:125px;height:105px" class="pic-error-child left"
            src="@/assets/wisdom/sp.png">
          <img v-if="task.status == 1" alt="401" style="width:125px;height:105px" class="pic-error-child left"
            src="@/assets/wisdom/tg.png">
          <img v-if="task.status == 2" alt="401" style="width:125px;height:105px" class="pic-error-child left"
            src="@/assets/wisdom/jj.png">
          <!-- <img v-if="task.status == 2" alt="401" style="width:125px;height:105px" class="pic-error-child left" src="@/assets/wisdom/sp.png"> -->
        </el-col>
          <!-- 0-民政 1-街道 2-社区 -->
        <el-col :span="11" v-if="task.status == 0 && ((level == 1 && source == 0) || (level == 0 && source == 1)) ">
          <div class="ft21"><img alt="401" style="width:15px;height:15px" class="pic-error-child left"
              src="@/assets/wisdom/zy.png">
            <span v-if="source == 1">街道</span> <span v-if="source == 0">社区</span>数据已提交，请尽快审批
            <el-button class="tongguo" plain @click="handleTg">确认通过</el-button>
          </div>
          <div class="ft21">
            如对数据有误，可 <el-button class="tongguo" plain @click="handlebh">驳回</el-button>后重新提交
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div class="message">

      <el-row :gutter="20">
        <el-col :span="6">
          <el-card style="height:658px;border-radius:30px">
            <span class="bd6"></span>
            <h1 style="font-size:24px">处理进度</h1>

            <el-timeline :reverse="reverse" style="margin-top:40px">
              <!-- <el-timeline-item v-for="(activity, index) in activities" :color="activity.color" size="large"
                :key="index" :timestamp="activity.timestamp">
                <div class="aname">{{activity.content}}</div>
                <div class="adesc">李四 审批通过</div>
              </el-timeline-item> -->

              <el-timeline-item :color="color" size="large" :key="task.upUid" :timestamp="task.optTime">
                <div class="aname" v-if="source == 0">街道</div>
                <div class="aname" v-if="source == 1">民政</div>
                <div class="adesc">{{task.optName}}
                  <span v-if="task.status == 1">审批通过</span>
                  <span v-if="task.status == 2">审批驳回，原因:{{task.refuseReason}}</span>
                </div>
              </el-timeline-item>

              <el-timeline-item color="#eff111" size="large" :key="task.optUid" :timestamp="task.upTime">
                <div class="aname" v-if="source == 1">街道</div>
                <div class="aname" v-if="source == 0">社区</div>
                <div class="adesc">{{task.upName}} 已提交</div>
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </el-col>
        <el-col :span="18">

          <el-card style="height:658px;border-radius:30px">
            <span class="bd6"></span>
            <h1 style="font-size:24px">沟通记录</h1>
            <div class="message">
              <div style=" overflow: hidden;">
                <el-row>
                  <el-col :span="24">
                    <div id="dataShow"  class="dataShow">
                      <div v-for="(item,index) in Message" :key="index" style="background-color: #ffffff;">
                        <el-row v-if="item.sendUid > 0">
                          <el-col :span="18" :offset="3">
                            <span class="aa">
                              {{ item.message }}
                            </span>
                          </el-col>
                          <el-col :span="3">
                            <span align="center">
                              <el-avatar style="display:block;margin:auto" :size="50"
                                :src="require('../../../../assets/wisdom/profile.png')"></el-avatar>
                              <div class="cname">{{item.sendName}}</div>
                              <div class="ctime">{{item.createdTime}}</div>
                              <!--对应头像-->
                            </span>
                          </el-col>
                        </el-row>
                        <br>
                        <el-row v-if="item.replyUid > 0">
                          <el-col :span="3">
                            <span align="center">
                              <el-avatar style="display:block;margin:auto" :size="50"
                                :src="require('../../../../assets/wisdom/profile.png')"></el-avatar>
                              <div class="cname">{{item.replyName}}</div>
                              <div class="ctime">{{item.createdTime}}</div>
                            </span>
                          </el-col>
                          <el-col :span="18">
                            <span class="bb">
                              {{ item.message }}
                            </span>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div>
              <h1 class="co1" style="font-size:18px">我要回复</h1>
              <form>
                <el-row>
                  <el-col :span="20">
                    <el-input type="textarea" v-model="textarea">
                    </el-input>
                  </el-col>

                  <el-col :span="4">
                    <el-button class="comment" type="primary" @click="subMessage">OK</el-button>
                  </el-col>
                </el-row>
              </form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="驳回" :visible.sync="bShow" width="30%">
      <el-form label-width="70px">
        <template>
          <el-input type="textarea" :rows="2" placeholder="请输入拒绝理由" v-model="refuse">
          </el-input>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bShow = false">取 消</el-button>
        <el-button type="primary" @click="saveRefuse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getJdDetail,
    getMzDetail,
    getSqDetail,
    sendMessage,
    jdApprove,
    mzApprove,
    exportPdf,
    exportExc
  } from '../../../../api/present';
  export default {
    name: 'PresentDetail',
    components: {
      // Tinymce
    },
    data() {
      return {
        textarea: '',
        visible: false,
        customer: '',
        browser: 'Chrome',
        editFrom: {},
        selectedCategoryOptions: '',
        selectCategory: [],
        formLabelWidth: '80px',
        currentId: '', // 当前操作对象的ID值，主要用于修改、查看
        showType: 'edit', // 操作类型编辑、新增、查看,
        reverse: true,
        Id: '',
        level: '',
        task: [],
        Message: [],
        bShow: false,
        refuse: '',
        source: '',
        color: '#0102f6'
      }
    },
    created() {
      this.level = localStorage.getItem('level')
      this.Id = this.$route.params.id,
        this.InitDictItem()
      // this.reset()
    },
    methods: {
      exportPdf() {
        exportExc([this.Id]).then(res => {
          let data = res
          if (!data) {
            return
          }

          let url = window.URL.createObjectURL(new Blob([data]))
          let a = document.createElement('a')
          a.style.display = 'none'
          a.href = url
          a.setAttribute('download', '呈报数据.xls')
          document.body.appendChild(a)
          a.click() //执行下载
          window.URL.revokeObjectURL(a.href)
          document.body.removeChild(a)
          this.$message.success('导出成功!')
        });
      },
      exportExcel() {
        if (this.Id == '') {
          this.$message.error('缺少数据!')
          return false
        }
        exportPdf([this.Id]).then(res => {
          let data = res
          if (!data) {
            return
          }
          window.open(res.data, '_blank')
        });

      },
      handleTg() {
        this.$confirm('确定要通过吗？', '提示', {
          type: 'warning'
        }).then(() => {
          let param = {
            taskId: this.Id,
            status: 0
          }
          if (this.level == 1) {
            jdApprove(param).then(res => {
              this.bShow = false
              this.InitDictItem()
              this.$message.success(res.message);

            });
          } else {
            mzApprove(param).then(res => {
              this.bShow = false
              this.InitDictItem()
              this.$message.success(res.message);

            });
          }
        }).catch(() => {});
      },
      handlebh() {

        this.bShow = true

      },
      saveRefuse() {
        let param = {
          taskId: this.Id,
          status: 1,
          refuseReason: this.refuse
        }
        if (this.level == 1) {
          jdApprove(param).then(res => {
            this.$message.success(res.message)
            this.bShow = false
            this.InitDictItem()
          });
        } else {
          mzApprove(param).then(res => {
            this.$message.success(res.message)
            this.bShow = false
            this.InitDictItem()
          });
        }
      },
      subMessage() {
        let that = this
        sendMessage({
          taskId: that.Id,
          message: that.textarea
        }).then(res => {
          that.InitDictItem()
          that.scrollToBottom()
          that.textarea = ''
          that.$message({
            message: '操作成功',
            type: 'success'
          })
        });
      },
      scrollToBottom() {
        this.$nextTick(() => {
          var container = this.$el.querySelector("#dataShow");
          container.scrollTop = container.scrollHeight;
        })
      },
      /**
       * 初始化数据
       */
      InitDictItem() {
        //获取居民列表0-民政 1-街道 2-社区
        let param = {
          id: this.Id
        }
        if (this.level == 0) {
          getMzDetail(param).then(res => {
            this.task = res.data.task
            this.Message = res.data.messages
            this.source = res.data.source
            if (res.data.task.status == 1) {
              this.color = '#0102f6'
            } else if (res.data.task.status == 2) {
              this.color = '#f60107'
            }
          });
        } else if (this.level == 1) {
          getJdDetail(param).then(res => {
            this.task = res.data.task
            this.Message = res.data.messages
            this.source = res.data.source
            if (res.data.task.status == 1) {
              this.color = '#0102f6'
            } else if (res.data.task.status == 2) {
              this.color = '#f60107'
            }
          });
        } else {
          getSqDetail(param).then(res => {
            this.task = res.data.task
            this.Message = res.data.messages
            this.source = res.data.source
            if (res.data.task.status == 1) {
              this.color = '#0102f6'
            } else if (res.data.task.status == 2) {
              this.color = '#f60107'
            }
          });
        }
      },

      /**
       * 选择分类
       */
      handleSelectCategoryChange: function (row) {

        this.selectCategory.forEach((item) => {
          if (this.selectedCategoryOptions == item.id) {
            this.editFrom.categoryName = item.title
          }
        })
        this.editFrom.categoryid = this.selectedCategoryOptions
      },

      // 表单重置
      reset() {
        if (!this.currentId) {
          this.editFrom = {
            categoryid: '',
            title: '',
            description: '',
            sortcode: 99,
            enabledmark: true
          }
          this.selectedCategoryOptions = ''
          this.resetForm('editFrom')
        } else {
          this.bindEditInfo()
        }
      },
      bindEditInfo: function () {
        getArticlenewsDetail(this.currentId).then(res => {
          this.editFrom = res.data
          this.$refs.editorDescription.setContent(res.data.description)
          this.selectedCategoryOptions = res.data.categoryid
        })
      },
      /**
       * 新增/修改保存
       */
      saveEditForm() {
        this.$refs['editFrom'].validate((valid) => {
          if (valid) {
            saveArticlenews(this.editFrom).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.currentSelected = ''
                this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews
                  .findIndex(item => item.path === this.$route.path), 1)
                this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView
                  .visitedViews.length - 1].path)
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bd6 {
    display: block;
    width: 6px;
    height: 22px;
    float: left;
    background-color: #4940FD;
    margin-top: 6px;
    margin-right: 6px;
  }
  .yuebon-page-footer {
    padding: 10px 20px 20px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    & button {
      margin-right: 10px;
    }
  }

  .font {
    font-size: 16px;
    font-weight: bold;
    font-family: "微软雅黑 Light";
  }

  .dataShow {
    overflow-y: scroll;
    overflow-x: hidden;
    margin-bottom: -24px;
    margin-top: -24px;
    height: 380px;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
  }

  .aa {
    float: right;
    position: relative;
    display: inline-block;
    max-width: calc(80%);
    min-height: 35px;
    line-height: 2.1;
    font-size: 15px;
    padding: 10px 20px;
    text-align: left;
    word-break: break-all;
    /* background-color: #9eea6a; */
    color: #000;
    border-radius: 4px;
    /* box-shadow: 0px 1px 7px -5px #000; */
    /* border: 0px solid #000; */
    border: 1px solid #CCCCCC;
    border-radius: 30px;
    margin-top: 0;
    margin-right: 10px;
  }

  .aa:after {
    content: "";
    border-top: solid 5px #00800000;
    border-left: solid 10px #9eea6a;
    border-right: solid 10px #00800000;
    border-bottom: solid 5px #00800000;
    position: absolute;
    top: 10px;
    left: 100%;
  }

  .bb {
    display: inline-block;
    line-height: 30px;
    font-style: normal;
    background-color: white;
    letter-spacing: 2px;
    position: relative;
    max-width: calc(80%);
    min-height: 35px;
    line-height: 2.1;
    font-size: 15px;
    padding: 10px 20px;
    text-align: left;
    word-break: break-all;
    border-radius: 4px;
    color: #333333;
    /* box-shadow: 0px 1px 7px -5px #000; */
    border: 1px solid #CCCCCC;
    border-radius: 30px;
    margin-top: 0;
    margin-left: 10px;
  }

  .bb:after {
    content: "";
    border-top: solid 5px #00800000;
    border-left: solid 10px #00800000;
    border-right: solid 10px #00800000;
    border-bottom: solid 5px #00800000;
    position: absolute;
    top: 10px;
    right: 100%;
  }

  .shenpi {
    width: 100%;
    height: 65px;
    line-height: 65px;
    background-color: #FFFFFF;
    overflow: hidden;
    display: block;

    span {
      width: 88px;
      background: #FAFAFA;
      display: block;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #4940FD;
      margin-top: 20px;
      line-height: 50px;
      height: 100%;
      margin-left: 30px;
    }
  }

  .h152 {
    height: 152px;
  }

  .message {
    margin: 10px 24px;
  }

  .ft20 {
    font-size: 16px;
    color: #333333;
    margin-top: 20px;
  }

  .ft28 {
    font-size: 20px;
    color: #4940FD;
    margin-top: 10px;
    font-weight: 400;
  }

  .ft21 {
    font-size: 16px;
    color: 666666;
    margin-top: 10px;
  }

  .tongguo {
    background: #FFFFFF;
    border: 1px solid #4940FD;
    height: 23px;
    line-height: 5px;
    font-size: 14px;
    color: #4940FD;
    font-weight: normal;
    margin: 0 5px;
  }

  .el-timeline-item {
    padding-bottom: 152px;
  }

  .co1 {
    font-size: 16px;
    color: #999999;
    margin-bottom: 20px;
  }

  .comment {
    margin-left: 20px;
    height: 50px;
    width: 118px;
    font-size: 18px;

    font-weight: 500;
    color: #FFFFFF;
  }

  .cname {
    padding-top: 10px;
    font-weight: 400;
    color: #333333;
    font-size: 14px;
  }

  .ctime {
    font-weight: 400;
    color: #999999;
    font-size: 14px;
  }

  .aname {
    color: #999999;
    font-size: 16px;
  }

  .adesc {
    font-size: 16px;
    color: #333333;
  }
</style>